<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统信息</title>
    
    <link rel="stylesheet" href="layui/css/layui.css">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="css/first.css">
</head>


<body style="padding: 10px;">
    <span class="layui-breadcrumb bread">
        <a href="">状态</a>
        <a href="">系统信息</a>
    </span>
    <div class="layuimini-container content" id="app">
        <div class="layuimini-main" style="margin-bottom: 45px;">
            <div class="pictures">
                <svg
                  style="margin: -5px 0 0 190px"
                  t="1680575260762"
                  class="icon"
                  viewBox="0 0 1170 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="15855"
                  width="50"
                  height="50"
                >
                  <path
                    d="M585.142857 365.714286m-36.571428 0a36.571429 36.571429 0 1 0 73.142857 0 36.571429 36.571429 0 1 0-73.142857 0Z"
                    fill="#54C3F1"
                    p-id="15856"
                  ></path>
                  <path
                    d="M731.428571 365.714286m-36.571428 0a36.571429 36.571429 0 1 0 73.142857 0 36.571429 36.571429 0 1 0-73.142857 0Z"
                    fill="#54C3F1"
                    p-id="15857"
                  ></path>
                  <path
                    d="M438.857143 365.714286m-36.571429 0a36.571429 36.571429 0 1 0 73.142857 0 36.571429 36.571429 0 1 0-73.142857 0Z"
                    fill="#54C3F1"
                    p-id="15858"
                  ></path>
                  <path
                    d="M1060.571429 877.714286H109.714286a109.714286 109.714286 0 0 1-109.714286-109.714286V109.714286a109.714286 109.714286 0 0 1 109.714286-109.714286h950.857143a109.714286 109.714286 0 0 1 109.714285 109.714286v658.285714a109.714286 109.714286 0 0 1-109.714285 109.714286zM109.714286 73.142857a36.571429 36.571429 0 0 0-36.571429 36.571429v658.285714a36.571429 36.571429 0 0 0 36.571429 36.571429h950.857143a36.571429 36.571429 0 0 0 36.571428-36.571429V109.714286a36.571429 36.571429 0 0 0-36.571428-36.571429z"
                    fill="#54C3F1"
                    p-id="15859"
                  ></path>
                  <path
                    d="M36.571429 658.285714h1097.142857v73.142857H36.571429zM402.285714 841.142857h73.142857v146.285714h-73.142857zM694.857143 841.142857h73.142857v146.285714h-73.142857z"
                    fill="#54C3F1"
                    p-id="15860"
                  ></path>
                  <path
                    d="M292.571429 950.857143h585.142857v73.142857H292.571429z"
                    fill="#54C3F1"
                    p-id="15861"
                  ></path>
                </svg>
                <div class="length1"></div>
                <svg
                  style="position: relative; left: -130px; top: 10px"
                  t="1680576714322"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="25907"
                  width="20"
                  height="20"
                >
                  <path
                    d="M93.696 512a418.304 321.024 0 1 0 836.608 0 418.304 321.024 0 1 0-836.608 0Z"
                    fill="#1296db"
                    p-id="25908"
                  ></path>
                </svg>
                <svg
                  style="margin: -10px -10px 0 70px"
                  t="1680575437569"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="23441"
                  width="65"
                  height="65"
                >
                  <path
                    d="M523.84 660.1c2.04 1.42 3.82 3.19 5.24 5.24l107.88 155.58c6.54 9.43 4.2 22.38-5.24 28.92-3.48 2.41-7.61 3.7-11.84 3.7H404.12c-11.48 0-20.78-9.3-20.78-20.78 0-4.23 1.29-8.36 3.7-11.84l107.88-155.58c6.54-9.44 19.49-11.78 28.92-5.24z m325.12-489.63c61.07 0 109.8 51.76 110.77 114.99l0.02 1.92v357.47c0 63.46-48.12 115.85-108.93 116.89l-1.85 0.02H646.31L528.7 602.99c-1.11-1.5-2.42-2.84-3.88-3.99l-0.44-0.34c-9.12-6.76-21.95-4.94-28.84 4.03l-0.23 0.3-117.63 158.77H175.04c-61.07 0-109.8-51.76-110.77-114.99l-0.02-1.92V287.38c0-63.46 48.12-115.85 108.93-116.89l1.85-0.02h673.93zM363.2 538.81c-9.71 8.26-10.9 22.84-2.65 32.56 8.25 9.72 22.82 10.91 32.53 2.65 76.84-65.34 146.48-68.51 224.66-0.2 9.6 8.39 24.18 7.4 32.56-2.21 8.38-9.61 7.4-24.2-2.21-32.59-96.2-84.08-191.36-79.73-284.89-0.21zM248.22 414c-9.7 8.28-10.86 22.86-2.59 32.56 8.27 9.71 22.84 10.87 32.54 2.59 153.7-131.15 297.64-137.75 454.48-0.2 9.59 8.41 24.17 7.44 32.57-2.15 8.4-9.59 7.44-24.19-2.15-32.59-174.89-153.38-344.44-145.62-514.85-0.21z"
                    fill="#5FB2F7"
                    p-id="23442"
                  ></path>
                </svg>
                <div class="length2"></div>
                <svg
                  style="position: relative; left: -170px; top: 10px"
                  t="1680576560063"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="25026"
                  width="20"
                  height="20"
                >
                  <path
                    d="M1023.035952 170.907721l-852.12806 852.128061L0.241225 852.730697l852.248588-852.12806z"
                    p-id="25027"
                    fill="#d81e06"
                  ></path>
                  <path
                    d="M170.425782 0l852.128061 852.12806L852.248758 1022.794727l-852.12806-852.248588z"
                    p-id="25028"
                    fill="#d81e06"
                  ></path>
                </svg>
                <svg
                  style="margin-top: -5px;"
                  t="1680575513547"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="24663"
                  width="65"
                  height="65"
                >
                  <path
                    d="M748.4 586.1c-10.4 33.3-27.4 63.6-49.6 89.4-28-18.4-59.5-32.7-93.3-42.4 5.6-32 9.1-67 9.9-104h180.1c0.4-6 0.6-12 0.6-18 0-6.1-0.3-12.2-0.6-18.2h-36.4v0.2H615.4c-0.8-37.1-4.3-72.1-9.9-104 33.8-9.7 65.3-24 93.3-42.4 22.2 25.8 39.2 56 49.5 89.2h37.9c-33.1-123-145.3-213.5-278.7-213.5-133.4 0-245.6 90.5-278.7 213.5h37.9c10.3-33.2 27.3-63.4 49.4-89.2 28 18.4 59.5 32.6 93.4 42.3-5.6 32-9.1 67-9.9 104.1H255.7v-0.2h-36.4c-0.4 6-0.6 12.1-0.6 18.2s0.2 12.1 0.6 18h180.2c0.8 37.1 4.3 72.1 9.9 104.1-33.9 9.7-65.4 23.9-93.4 42.3-22.2-25.8-39.2-56.1-49.5-89.4h-37.9c33 123 145.3 213.7 278.8 213.7s245.7-90.6 278.8-213.7h-37.8z m-75.6-265.6c-22.7 14-47.9 25.2-74.7 33.1-8.8-35.9-20.5-66.1-34.2-88.5 41 9.3 78.2 28.7 108.9 55.4zM435.6 493c0.8-35.9 4.1-67.9 9-95.8 20.4 3.6 41.3 5.6 62.9 5.6 21.5 0 42.5-1.9 62.9-5.5 4.8 27.9 8.1 59.9 9 95.8H435.6z m143.6 36.1c-0.8 35.8-4.1 67.9-9 95.8-20.3-3.6-41.3-5.5-62.8-5.5s-42.5 2-62.9 5.6c-4.8-27.9-8.1-59.9-9-95.8h143.7z m-71.8-270.6c13.3 0 38.7 35.6 55.6 103.4-18 3.1-36.5 4.8-55.6 4.8-19 0-37.6-1.7-55.5-4.8 16.9-67.8 42.3-103.4 55.5-103.4z m-165.3 62c30.7-26.7 67.9-46 108.8-55.4-13.7 22.4-25.4 52.6-34.2 88.5-26.7-7.9-51.8-19.1-74.6-33.1z m0 381.2c22.7-14 47.8-25.2 74.6-33.1 8.8 35.8 20.5 66.1 34.2 88.5-40.9-9.4-78-28.7-108.8-55.4z m165.3 62c-13.3 0-38.7-35.6-55.5-103.4 18-3.1 36.5-4.8 55.5-4.8s37.6 1.7 55.6 4.8c-16.9 67.8-42.3 103.4-55.6 103.4z m56.5-6.6c13.7-22.4 25.5-52.6 34.2-88.5 26.9 7.9 51.9 19 74.7 33-30.7 26.7-67.9 46.1-108.9 55.5z"
                    fill="#1195FE"
                    p-id="24664"
                  ></path>
                  <path
                    d="M240.1 511.1m-36.9 0a36.9 36.9 0 1 0 73.8 0 36.9 36.9 0 1 0-73.8 0Z"
                    fill="#FFFFFF"
                    p-id="24665"
                  ></path>
                  <path
                    d="M240.1 562.2c-28.2 0-51.1-22.9-51.1-51.1 0-28.2 22.9-51.1 51.1-51.1s51.1 22.9 51.1 51.1c0 28.2-22.9 51.1-51.1 51.1z m0-73.7c-12.5 0-22.6 10.1-22.6 22.6 0 12.5 10.1 22.6 22.6 22.6s22.6-10.1 22.6-22.6c0-12.5-10.1-22.6-22.6-22.6z"
                    fill="#1195FE"
                    p-id="24666"
                  ></path>
                  <path
                    d="M781.4 511.1m-36.9 0a36.9 36.9 0 1 0 73.8 0 36.9 36.9 0 1 0-73.8 0Z"
                    fill="#FFFFFF"
                    p-id="24667"
                  ></path>
                  <path
                    d="M781.4 562.2c-28.2 0-51.1-22.9-51.1-51.1 0-28.2 22.9-51.1 51.1-51.1 28.2 0 51.1 22.9 51.1 51.1 0 28.2-23 51.1-51.1 51.1z m0-73.7c-12.5 0-22.6 10.1-22.6 22.6 0 12.5 10.1 22.6 22.6 22.6 12.5 0 22.6-10.1 22.6-22.6 0-12.5-10.2-22.6-22.6-22.6z"
                    fill="#1195FE"
                    p-id="24668"
                  ></path>
                  <path
                    d="M493.8 135c5.6-0.2 11.3-0.4 16.9-0.4 207.8 0 376.8 169 376.8 376.8 0 116.7-53.3 221.1-136.8 290.3l10.7 27.8c94-74.3 154.6-189.2 154.6-318.1 0-223.5-181.8-405.3-405.3-405.3-9.3 0-18.5 0.4-27.7 1.1l10.8 27.8zM504.6 888.1c-205-3.3-370.7-170.9-370.7-376.7 0-108.4 46.1-206.2 119.5-275l-11-28.5c-84 74.3-137.1 182.8-137.1 303.5 0 223.5 181.8 405.3 405.3 405.3 1.6 0 3.3-0.1 4.9-0.1l-10.9-28.5z"
                    fill="#AED7FF"
                    p-id="24669"
                  ></path>
                  <path
                    d="M510.7 902.8m-36.9 0a36.9 36.9 0 1 0 73.8 0 36.9 36.9 0 1 0-73.8 0Z"
                    fill="#FFFFFF"
                    p-id="24670"
                  ></path>
                  <path
                    d="M510.7 954c-28.2 0-51.1-22.9-51.1-51.1 0-28.2 22.9-51.1 51.1-51.1 28.2 0 51.1 22.9 51.1 51.1 0 28.1-22.9 51.1-51.1 51.1z m0-73.8c-12.5 0-22.6 10.1-22.6 22.6 0 12.5 10.1 22.6 22.6 22.6s22.6-10.1 22.6-22.6c0-12.4-10.1-22.6-22.6-22.6z"
                    fill="#1195FE"
                    p-id="24671"
                  ></path>
                  <path
                    d="M510.7 119.3m-36.9 0a36.9 36.9 0 1 0 73.8 0 36.9 36.9 0 1 0-73.8 0Z"
                    fill="#FFFFFF"
                    p-id="24672"
                  ></path>
                  <path
                    d="M510.7 170.4c-28.2 0-51.1-22.9-51.1-51.1s22.9-51.1 51.1-51.1c28.2 0 51.1 22.9 51.1 51.1s-22.9 51.1-51.1 51.1z m0-73.7c-12.5 0-22.6 10.1-22.6 22.6s10.1 22.6 22.6 22.6 22.6-10.1 22.6-22.6-10.1-22.6-22.6-22.6z"
                    fill="#1195FE"
                    p-id="24673"
                  ></path>
                </svg>
              </div>
              <div class="pictures_font">
                  <ul class="listul">
                    <li class="choices">
                        终端设备
                    </li>
                    <li class="choices">
                        系统
                    </li>
                    <li class="choices">
                        WAN
                    </li>
                </ul>
              </div>
            </div>
            <el-row type="flex" style="margin:-15px 0 10px 20px;">
              <el-col :span="8">
                <el-progress type="circle" :percentage="progressone" :stroke-width="10" :width="90" :height="90" stroke-linecap="square" :format="formatone"></el-progress>
              </el-col>
              <el-col :span="8"><el-progress type="circle" :percentage="progresstwo" :stroke-width="10" :width="90" :height="90" :format="formattwo"></el-progress></el-col>
              <el-col :span="8"><el-progress type="circle" :percentage="progressthree" :stroke-width="10" :width="90" :height="90" :format="formatthree"></el-progress></el-col>
            </el-row>
            <form class="layui-form" action="">
              <div class="layui-form-item">
                <label class="layui-form-label">ID</label>
                <div class="layui-input-block">
                  <input id="DeviceNum" type="text" name="DeviceNums" required  lay-verify="required" placeholder="请输入ID" autocomplete="off" class="layui-input" disabled>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">主机名</label>
                <div class="layui-input-block">
                  <input id="Name" type="text" name="Names" required  lay-verify="required" placeholder="请输入主机名" autocomplete="off" class="layui-input" disabled>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label" style="width: 120px;" id="type">主机型号</label>
                <div class="layui-input-block">
                  <input id="HardVer" type="text" name="HardVers" required  lay-verify="required" placeholder="请输入主机型号" autocomplete="off" class="layui-input" disabled>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label" style="width: 120px;" id="type">固件版本</label>
                <div class="layui-input-block">
                  <input id="SoftVer" type="text" name="SoftVers" required  lay-verify="required" placeholder="请输入固件版本" autocomplete="off" class="layui-input" disabled>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label" style="width: 120px;" id="type">本地时间</label>
                <div class="layui-input-block">
                  <input id="SystemRTC" type="text" name="SystemRTCs" required  lay-verify="required" placeholder="请输入本地时间" autocomplete="off" class="layui-input" disabled>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label" style="width: 120px;" id="type">运行时间</label>
                <div class="layui-input-block">
                  <input id="RunTime" type="text" name="RunTimes" required  lay-verify="required" placeholder="请输入运行时间" autocomplete="off" class="layui-input" disabled>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label" style="width: 120px;" id="type">主机温度</label>
                <div class="layui-input-block">
                  <input id="Temperature" type="text" name="Temperatures" required  lay-verify="required" placeholder="请输入主机温度" autocomplete="off" class="layui-input" disabled>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">TF卡</label>
                <div class="layui-input-block">
                  <input id="SN" type="text" name="SNs" required  lay-verify="required" placeholder="请输入TF卡" autocomplete="off" class="layui-input" disabled>
                </div>
              </div>
            </form>
        </div>
    </div>

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="./layui/layui.js"></script>
     <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
      
       new Vue({
      el: '#app',
      data: function() {
        return { 
          progressone:0,
          progresstwo:0,
          progressthree:0,
          
        }
      },
      created(){
        this.ajaxfun()
      },
      methods: {
        formatone(percentage) {
          let tex1 = 'cpu使用率'
          return percentage + '%\n' + tex1
        },
        formattwo(percentage) {
          let tex2 = '内存使用率'
          return percentage + '%\n' + tex2
        },
        formatthree(percentage) {
          let tex3 = '存储'
          return percentage + '%\n' + tex3
        },
        ajaxfun(){
          let that=this;
            $.ajax({
                url: "http://127.0.0.1:8080/api/v1/system/status",
                type: "get",
                data: {  },
                dataType: "json",
                success: function (res) {
                  that.progressone = Number(res.Data.CPUUse)
                  that.progresstwo=Number(res.Data.DiskUse)
                  that.progressthree=Number(res.Data.MemUse)
                  $('#DeviceNum').val(res.Data.DeviceNum)
                  $('#Name').val(res.Data.Name)
                  $('#HardVer').val(res.Data.HardVer)
                  $('#SoftVer').val(res.Data.SoftVer)
                  $('#SystemRTC').val(res.Data.SystemRTC)
                  $('#RunTime').val(res.Data.RunTime)
                  $('#Temperature').val(res.Data.Temperature)
                  $('#SN').val(res.Data.SN)
                    console.log('我成功了',res)
                },
                error: function () {
                    alert("请求失败！")
                }
            });
        }
      }
    })

        $(".listspan").click(function () {
            var src = $(this).attr('href');
            window.open(src, '_self');
        });
        $(".listul li").click(function(){
            $(".listul li").removeClass("active")//括号里面写你要删除的class名字 增加和删除的一样
            $(this).addClass("active")//当前点击的增加class 括号里面写你要增加的class名字
            

        })
        layui.use('element', function () {
            var element = layui.element;
            //导航的hover效果、二级菜单等功能，需要依赖element模块
            //导航点击事件
            element.on('nav(demo)', function (elem) {
                layer.msg(elem.text());
            });
        });
        layui.use('form', function(){
        var form = layui.form;
         $.ajax({//这个？还是啥 请求嘛 之前写的是表格 现在这个是表单我要的是圆圈 啊？
                url: "http://127.0.0.1:8080/api/v1/system/status",
                type: "get",
                data: {  },
                dataType: "json",
                success: function (res) {
                    console.log(res);
                },
                error: function () {
                    alert("请求失败！")
                }
            });
        //监听提交
        form.on('submit(formDemo)', function(data){
          layer.msg(JSON.stringify(data.field));
          return false;
        });
      });
    </script>
</body>

</html>